<template>
	<view>
		<!-- 1. 搜索列表页 -->
    <search></search>
    <!-- 2. 排序 tabs -->
    <view class="tabs">
      <view class="tabs_title">
        <view 
          v-for="(item,index) in tabsTitles" 
          :key="item.id" 
          class="tabs_title_item"
          :class="index === activeIndex ? 'active' : ''"
          @tap="changeTabsIndex(index)"
        >
          {{item.text}}
        </view>
      </view>
    </view>
    <!-- 3. 商品列表 -->
    <scroll-view scroll-y @scrolltolower="scrolltolowerHandle" class="goods_list">
      <block 	  
        v-for="(item,index) in goods"
        :key="item.goods_id"
      >
        <!-- 调用组件 -->
        <goodsItem :item="item"></goodsItem>
      </block>
      <view class="no_more_tips" v-if="!hasMore">
        没有更多数据了 😁
      </view>
    </scroll-view>
  </view>
</template>

<script>
/* 
  1. 获取页面参数
  2. 根据页面参数获取对应的列表数据
  3. 导入注册并使用搜索框组件
  
  
   * 需求分析
   * 	1、搜索，直接用组件
   * 	2、排序 tab
   * 		2.1 布局
   * 		2.2 默认选中“综合”排序
   * 		2.3 点击排序时，切换选中状态
   * 	3、商品列表
   * 		3.1 布局
   * 		3.2 根据API返回数据显示商品，接口地址 goods/search
   * 		3.3 根据分类id显示商品
   * 				3.3.1 父页面通过URL传递参数，例如url?cid=1，子页面在onLoad生命周期接收参数，参数会以对象形式接收
   * 		3.4 上拉到底自动加载下一页
   * 				3.4.1 scrollview提供scrolltolower事件监听是否到达底部
   * 				3.4.2 当到达底部，重新请求商品数据，修改pagenum
   *	4、页面下拉刷新
  			 4.1 在页面配置文件加入enablePullDownRefresh配置，设置为true
  			 4.2 在onPullDownRefresh生命周期处理下拉逻辑，处理完毕，调用uni.stopPullDownRefresh停止下拉
  			 		😈 如果有异步处理，需要通过await等待处理完毕再调用停止下拉
  
*/
  
  import search from '../../components/search/index.vue';
  import goodsItem from '../../components/goodsItem/index.vue';
	export default {
    components:{
      search,
      goodsItem
    },
		data() {
			return {
        // 商品列表数据
				goods: [],
        options:{},
        pagesize:10,
        pagenum:1,
        hasMore: true,
        activeIndex:0,
        tabsTitles:[
          {id:1, text:'综合'},
          {id:2, text:'销量'},
          {id:3, text:'价格'},
        ]
			}
		},
    // 1. 获取页面参数
		onLoad(options) {
      // console.log(options);
      this.options = options;
      this.getGoodsList();
		},
    // 页面下拉事件监听
    onPullDownRefresh(){
    	console.log('监听页面下拉');
      // 对分页相关数据进行重设操作
      this.goods = [];
      this.pagenum = 1;
      this.hasMore = true;
      
      // 根据重设的参数重新发起网络请求
      this.getGoodsList();
      
    },
		methods: {
      // 滚动触底事件
      scrolltolowerHandle(){
        console.log('滚动触底了');
        // 当到达底部，修改pagenum，重新请求商品数据
        this.pagenum += 1;
        this.getGoodsList();
        
      },
      // 改变 tabs 索引
      changeTabsIndex(index){
        // console.log(index);
        this.activeIndex = index;
      },
      // 获取商品列表
      getGoodsList(){
        // 判断是否还有更多数据，如果没有更多数据就直接退出
        if(!this.hasMore) return;
        
        uni.showLoading({
          title: '疯狂加载中...',
        });
        uni.request({
          // 请求地址
          url:"https://api-hmugo-web.itheima.net/api/public/v1/goods/search",
          // 请求参数
          data: {
            // 页面参数
            ...this.options,
            // 页容量
            pagesize: this.pagesize,
            // 页码 - 可变的
            pagenum: this.pagenum,
          }
        }).then(res=>{
          // console.log('数据',res[1].data.message);
          const { goods } = res[1].data.message;
          
          // 如果数组长度不为 0，继续请求下一页
          if(goods.length !== 0){
            // 😈 利用ES6的展开运算符把两个新旧两个商品列表数据连接成一个新数组
            this.goods = [...this.goods, ...goods];
          }
          // 如果数组长度为 0，代表已经没有更多数据了
          else{
            // 标记为没有数据了
            this.hasMore = false;
            // 提示用户
            uni.showToast({
              title:'没有更多数据了',
              icon:'none'
            });
          }
           
          // 隐藏加载框
          uni.hideLoading();
          // 隐藏下拉刷新动画效果
          uni.stopPullDownRefresh();
          
          
        });
      }
		}
	}
</script>

<style lang="less">
  // 排序选项卡
	.tabs{
    .tabs_title{
      display: flex;
      // space-evenly 在部分低版本的手机可能存在兼容问题
      justify-content: space-evenly;
      .tabs_title_item{
        box-sizing: border-box;
        height: 88rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0 30rpx;
        border-bottom: 4rpx solid transparent;
        &.active{
          border-bottom-color:var(--mainColor);
          font-weight: bold;
        }
      }
    }
  }
  // 排序选项卡
  .goods_list{
    // 列表滚动容器的高度
    // height: calc(100vh - 88rpx);
    height: calc(100vh - 88rpx - 100rpx);
    
  }
  .no_more_tips{
    height: 80rpx;
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>